
/**
 * timeline
 * --------------------------------------------------
 */

ul.timeline {
  padding-left: 15px;
  .timeline-item {
    position: relative;
    padding-bottom: 10px;
    color: #A4A4A4;
    &-tail {
      position: absolute;
      left: 8px;
      top: 10px;
      height: 100%;
      border-left: 1px solid #e9e9e9;
    }
    &-head {
      position         : absolute;
      background-color : #DDD;
      width            : 13px;
      height           : 13px;
      left             : 2px;
      top: 4px;
      @include border-radius(50%);
      &-balanced {
        width            : 16px;
        height           : 16px;
        left             : 0;
        background: $balanced;
        &:before {
          background: $balanced;
        }
      }
      &:before {
        position: absolute;
        left: -3px;
        top: -3px;
        content: '';
        display: block;
        width: 22px;
        height: 22px;
        opacity: .5;
        @include border-radius(50%);
      }
    }
    &-content {
      margin-left: 30px;
      padding-bottom: 10px;
      padding-right: 20px;
      border-bottom: 1px solid #F1F1F1;
      p{
        padding: 3px 0;
      }
    }
    &:last-child {
      .timeline-item-content{
        border-bottom: none;
      }
    }
  }
}
